{% extends '../common/base.html' %} {% block body %}


<div class="page-header">
    <h2>接口文档中心
        <small>version 1.0.0版</small>
    </h2>
</div>


<div class="content-api-list">
    <div class="alert alert-info" style="width:100%">
        备注：此页面是项目集合页面，注意：⚠️⚠️ ⚠️
        <span class="alert-link" style="color:red;">删除相关项目时，请谨慎操作，会连同该项目所有的接口都将删除！务必小心！</span>⚠️⚠️ ⚠️
    </div>

    {% for item in result%}


    <div class="panel panel-info bs-callout">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a href="javascript:;" @click="clickGroup('{{item.system_id}}')">{{item.system_name}}</a>
            </h3>
        </div>
        <div class="panel-body">
            <p>
                {{item.system_desc}}
            </p>
            <p class="flex-between-center">
                <span>
                    <i class="glyphicon glyphicon-user">

                    </i> {{item.user_account}}</span>
                <span>
                    <i class="glyphicon glyphicon-time"></i> {{item.system_time}}</span>
            </p>
            <div class="">接口数量:{{item.count if item.count else "0"}}</div>
        </div>

        <div class="panel-footer">

            <div class="footer flex-between-center">
                <span>
                    <i class="glyphicon glyphicon-sound-5-1"></i>&nbsp;版本号: {{item.system_version}}</span>
                    {% if item.user_id==user.user_id %}
                <div >
                    <button class="btn btn-success btn-xs" @click="editProject('{{item.system_id}}','{{item.system_name}}','{{item.system_version}}','{{item.system_desc}}','{{item.system_url}}')">
                        <i class="glyphicon glyphicon-check"></i>&nbsp;修改</button>
                    <button class="btn btn-danger btn-xs" @click="deleteProject('{{item.system_id}}')">
                        <i class="glyphicon glyphicon-trash"></i>&nbsp;删除</button>
                </div>
                {% endif %}
            </div>


        </div>

    </div>


    {% endfor %}


    <div class="panel panel-default bs-callout flex-align-center gray-color">
        <div class="panel-body ">
            <dl class="pointer" @click="addProjectItem">
                <dt>
                    <i class="glyphicon glyphicon-plus-sign f40"></i>
                </dt>
                <dd class="mt10">添加项目</dd>
            </dl>
        </div>
    </div>

</div>


<div class="modal fade" id="myDialog" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">项目操作</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">项目名称:</label>
                        <input type="text" class="form-control" v-model.trim="system_name" placeholder="项目名称">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="control-label">项目接口地址:</label>
                        <input type="text" class="form-control" v-model.trim="system_url" placeholder="接口地址">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="control-label">项目版本号:</label>
                        <input type="text" class="form-control" v-model.trim="system_version" placeholder="项目版本号">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="control-label">项目介绍:</label>
                        <textarea class="form-control" v-model.trim="system_desc" rows="5" placeholder="项目介绍"></textarea>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" @click="submitMethods">保存</button>
            </div>
        </div>
    </div>
</div>

{% endblock%} {% block script %}
<script>
    new Vue({
        el: '#container',
        delimiters: ['${', '}'],
        data() {
            return {
                system_id: '',
                system_name: '',
                system_url: '',
                system_version: '',
                system_desc: ''
            }
        },
        mounted() {},
        methods: {
            addProjectItem() {
                this.system_id = '';
                this.system_name = '';
                this.system_version = '';
                this.system_url = '';
                this.system_desc = ''
                $('#myDialog').modal()
            },
            clickGroup(id) {
                sessionStorage.setItem('group', id);
                location.href = `  /admin/api?system_id=${id}`
            },
            //添加接口
            submitMethods() {
                let url = this.system_id ? '/admin/editProject' : '/admin/addProject'
                let params = {
                    system_name: this.system_name,
                    system_version: this.system_version,
                    system_url: this.system_url,
                    system_desc: this.system_desc
                }
                if (this.system_id) {
                    params.system_id = this.system_id
                }
                console.log(params)
                $.ajax({
                    url: url,
                    type: "POST",
                    data: params,
                    dataType: "json",
                }).then((res) => {
                    if (res.success) {
                        location.reload();
                    }
                })
            },
            //删除接口
            deleteProject(id) {

                this.$confirm('确定删除该接口?此项目下的所有接口都将删除，请谨慎操作，不可逆回！！！！！！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    lockScroll: false
                }).then(() => {
                    $.ajax({
                        url: `/admin/delProject?system_id=${id}`,
                        type: "GET",
                        dataType: "json",
                    }).then((res) => {
                        if (res.success) {
                            location.reload();
                        }
                    })
                }).catch(() => {

                });

            },
            editProject(id, name, version, desc, url) {
                this.system_id = id;
                this.system_name = name;
                this.system_version = version;
                this.system_url = url
                this.system_desc = desc
                $('#myDialog').modal()
            },

        }
    })
</script>
{% endblock %}